<template>
  <div class="login">
    <div class="left">
      <h1>晨旭数据大屏综合展示系统</h1>
      <img src="../../assets/loginimg.png" alt="" />
    </div>
    <div class="right">
      <h1>欢迎登录</h1>
      <div class="hen"></div>
      <div class="form">
        <el-form ref="formdata" :model="form.value" :rules="rules">
          <el-form-item prop="account">
            <el-input v-model="form.value.account" maxlength="11">
              <template #prepend>
                <svg
                  fill="none"
                  version="1.1"
                  width="16.5"
                  height="20"
                  viewBox="0 0 16.5 20"
                >
                  <g>
                    <path
                      d="M13.75,0C15.2688,0,16.5,1.23125,16.5,2.75L16.5,17.25C16.5,18.7687,15.2688,20,13.75,20L2.75,20C1.23125,20,0,18.7687,0,17.25L0,2.75C0,1.23125,1.23125,0,2.75,0L13.75,0ZM10.25,16.25L6.25,16.25C5.83579,16.25,5.5,16.5858,5.5,17C5.5,17.4142,5.83579,17.75,6.25,17.75L10.25,17.75C10.6642,17.75,11,17.4142,11,17C11,16.5858,10.6642,16.25,10.25,16.25ZM13.75,1.5L2.75,1.5C2.05964,1.5,1.5,2.05965,1.5,2.75L1.5,14L15,14L15,2.75C15,2.05964,14.4404,1.5,13.75,1.5Z"
                      fill="#FFB14B"
                      fill-opacity="1"
                    />
                  </g>
                </svg>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.value.password"
              type="password"
              show-password
              maxlength="16"
            >
              <template #prepend>
                <svg
                  fill="none"
                  version="1.1"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                >
                  <g style="mix-blend-mode: passthrough">
                    <g style="mix-blend-mode: passthrough"></g>
                    <g>
                      <path
                        d="M17.599800000000002,10.33353L17.599800000000002,7.83255Q17.5985,2,11.99891,2Q6.3994599999999995,2,6.3994599999999995,7.83255L6.3994599999999995,10.33353L4,10.33353L4,22L19.999200000000002,22L19.999200000000002,10.33353L17.599800000000002,10.33353ZM12.7996,16.7688L12.7996,19.5003L11.199629999999999,19.5003L11.19962,16.7688C10.72303,16.48,10.39894,15.9474,10.39894,15.3329C10.39894,14.4124,11.11627,13.6665,11.99889,13.6665C12.88164,13.6665,13.59895,14.4124,13.59895,15.3329C13.59898,15.9474,13.2748,16.479799999999997,12.7996,16.7688ZM15.9997,10.33222L7.99952,10.33222L7.99952,7.84427C8.008659999999999,7.14645,8.242930000000001,3.6664399999999997,11.99891,3.6664399999999997C15.755,3.6664399999999997,15.9906,7.14645,15.9997,7.83255L15.9997,10.33222Z"
                        fill="#FFB14B"
                        fill-opacity="1"
                      />
                    </g>
                  </g>
                </svg>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn" @click="submit(formdata)">登录</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, ref, onMounted } from "vue";

import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import store from "../../store";
const $router = useRouter();
const $route = useRoute();

console.log(useRouter());

let base64img = ref();
onMounted(() => {});

let form: any = reactive({ value: { account: "", password: "" } });

let rules = {
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};

const formdata = ref<FormInstance>();
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (
        form.value.account == "18102627699" &&
        form.value.password == "cx2022"
      ) {
        localStorage.setItem("token", "edtzk");
        $router.push("/home");
      } else if (form.account == "13913981678" && form.password == "981678") {
        localStorage.setItem("token", "edtzk");
        $router.push("/home");
      } else {
        ElMessage.warning("输入错误");
        return;
      }
    } else {
    }
  });
};

// 获取路由
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  font-size: 18px;
  overflow: hidden;
  background-size: 100% 100%;
  background: url("../../assets/loginbg.png") 100% 100% no-repeat;
  // background: red;
  position: fixed;
  background-size: 100% 100%;
  position: relative;
  .left {
    top: 14%;
    left: 16%;
    position: absolute;
    width: 600px;
    height: 62%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h1 {
      font-size: 30px;
      color: #455a64;
      text-align: center;
    }
    img {
      width: 90%;
      height: 80%;
    }
  }
  .right {
    width: 29.6875rem;
    height: 500px;
    background: white;
    box-shadow: 0px 4px 6px 0px #dce9ff;
    position: absolute;
    top: 20%;
    right: 10%;
    h1 {
      margin-top: 44px;
      line-height: 56px;
      font-size: 30px;
      font-weight: 400;
      text-align: center;
    }
    .hen {
      position: absolute;
      width: 40px;
      background: #ffa939;
      height: 6px;
      border-radius: 3px;
      left: 50%;
      transform: translateX(-50%);
    }
    .form {
      height: 220px;
      width: 74%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 170px;
      :deep(.el-form) {
        .el-form-item {
          margin-bottom: 26px;
          .el-input__wrapper {
            border-radius: 0px 0px 0px 0px;
            box-shadow: 0 0 0px 0px #fc6d00 inset !important;
            border-top: 1px solid #fc6d00;
            border-right: 1px solid #fc6d00;
            border-bottom: 1px solid #fc6d00;
            height: 42px;
          }
          .el-input-group__prepend {
            background-color: #ffffff;
            border-radius: 0px 0px 0px 0px;
            box-shadow: 0 0 0px 0px #fc6d00 inset !important;
            border-top: 1px solid #fc6d00;
            border-left: 1px solid #fc6d00;
            border-bottom: 1px solid #fc6d00;
            height: 44px;
          }
          .el-form-item__content {
            display: flex;
            justify-content: space-between;
            img {
              width: 35%;
              height: 48px;
            }
          }
        }
      }
    }
    .btn {
      top: 326px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      width: 74%;
      height: 46px;
      background: linear-gradient(
        135deg,
        #ffa32c 0%,
        rgba(255, 163, 44, 0.8) 100%
      );
      border-radius: 23px;
      font-size: 24px;
      color: white;
      text-align: center;
      line-height: 46px;
      cursor: pointer;
    }
  }
}
</style>
